<template>
	<view style="background-color: #F3F3F3;">
		<u-sticky bgColor="#fff">
			<view style="background-color: #2DBB55;" :style="{height:bgHeight}">
				<view
					style="display: flex;flex-direction: row;justify-content: space-between;margin-left: 20rpx;margin-right: 20rpx;"
					:style="{paddingTop:topHeigh}">
					<u-icon name="arrow-left" size="28" color="#ffffff" @click="finish"></u-icon>
					<text style="color: #ffffff;font-size: 36rpx;">我的群聊</text>
					<text style="height: 28rpx;width: 28rpx;"></text>
				</view>
			</view>
			<u-tabs lineColor="#2DBB55" :activeStyle="{color:'#2DBB55'}" :inactiveStyle="{ color: '#606266' }"
				:list="listTab" @click="clickTab" :current="current" :scrollable="false"></u-tabs>
		</u-sticky>

		<view style="z-index: 999;margin-top: 20rpx;">
			<view v-for="(item, i) in groupList" :key="i">

				<view style="background-color: #ffffff;display: block;"
					:style="{marginBottom:i<groupList.length-1? '10rpx':''}">
					<u-cell :title="item.group__name.length>16?item.group__name.substr(0,15)+'...':item.group__name"
						:label="item.group__introduce.length>16?item.group__introduce.substr(0,15)+'...':item.group__introduce"
						@click="clickItem(item)" :border="false">
						<u-avatar slot="icon" shape="square" size="50" :src="item.group__head_url"
							customStyle="margin: -3px 5px -3px 0" :d="item.is_red"></u-avatar>
					</u-cell>
					<view style="padding-left: 40rpx; padding-right: 40rpx; padding-bottom: 20rpx;" v-if="sts==3">
						<u-text customStyle="margin-top: 20rpx;" :text="'驳回理由:'+item.refuse_reason"
							color="#FF0000"></u-text>
						<u-button customStyle="margin-top: 20rpx;" :text="sts==2?'进入群聊':'重新申请'" type="success"
							:plain="true" shape="circle" @click="clickItem(item)"></u-button>
					</view>
					<view style="padding-left: 40rpx; padding-right: 40rpx; padding-bottom: 20rpx; width: 100%; display: flex; justify-content: space-between; align-items:  center; box-sizing: border-box;"  v-else-if="sts == 2">
						<view  class="chatview" :style="item.is_red==0?'width:100%':'width:48%'" >去聊天
							<cell  iconUrl='' contactText='' class="cellview" :completemessage="completemessage" :url='item.group__url' />
						</view>
						<view  v-if="item.is_red" class="chatview" @click="qx(item)" style="background: #fff; border: 1px solid #2DBB55; color: #2DBB55;">我已进群</view>


					</view>
					
					<!-- <view style="display: flex;flex-direction: row;">
						<u-avatar :src="item.group__head_url" shape="square" size="50"
							customStyle="margin: -3px 5px -3px 0"></u-avatar>
						<view style="display: block;flex: 1;">
							<u-text :text="item.group__name.length>12?item.group__name.substr(0,11)+'...':
								item.group__name" color="#000000"></u-text>
							<u-text :text="item.group__introduce.length>15?item.group__introduce.substr(0,14)+'...':
								item.group__introduce" color="#999999" size="12"></u-text>
							<u-text v-if="sts==3" customStyle="margin-top: 20rpx;" :text="'驳回理由:'+item.refuse_reason"
								color="#FF0000"></u-text>
							<u-button customStyle="margin-top: 20rpx;" v-if="sts==3" :text="sts==2?'进入群聊':'重新申请'"
								type="success" :plain="true" shape="circle" @click="clickItem(item)"></u-button>
						</view>
					</view> -->

				</view>
			</view>
		</view>
		<!-- <u-list customStyle="margin-top: 20rpx;">
			<u-list-item v-for="(item, i) in groupList" :key="i">
				<view style="background-color: #ffffff;">
					<view style="display: flex;margin: 20rpx;flex-direction: row;">
						<u-avatar shape="square" size="50" customStyle="margin: -3px 5px -3px 0"></u-avatar>
						<view style="display: block;flex: 1;">
							<u-text :text="item.group__name.length>12?item.group__name.substr(0,11)+'...':
							item.group__name" color="#000000"></u-text>
							<u-text :text="item.group__introduce.length>15?item.group__introduce.substr(0,14)+'...':
							item.group__introduce" color="#999999"></u-text>
							<u-text v-if="sts==3" customStyle="margin-top: 20rpx;" :text="'驳回理由:'+item.refuse_reason"
								color="#FF0000"></u-text>
							<u-button customStyle="margin-top: 20rpx;" v-if="sts!=1" :text="sts==2?'进入群聊':'重新申请'"
								type="success" :plain="true" shape="circle" @click="clickItem(item)"></u-button>
						</view>
					</view>

				</view>
			</u-list-item>
		</u-list> -->
		<u-popup :safeAreaInsetBottom="true" :safeAreaInsetTop="true" closeable :show="showPopApply" mode="center"
			@close="closePopApply" :round="10">
			<view class="u-popup-slot">
				<view style="display: flex;flex-direction: row;justify-content: center;">
					<text style="font-size: 16px;font-weight:bold;">进群申请</text>
				</view>
				<scroll-view scroll-y style="max-height: 800rpx;">
					<view style="display: block;margin-left: 30rpx; margin-right: 30rpx;">
						<u-text customStyle="margin-top: 20rpx;" :text="'群聊名称:'+groupName"></u-text>
						<u-text customStyle="margin-top: 20rpx;" text="*您的称呼"></u-text>
						<u-input customStyle="margin-top: 20rpx;" v-model="addGroup.name" placeholder="请输入您的称呼"
							clearable></u-input>
						<u-text customStyle="margin-top: 20rpx;" :text="'您的手机号:'+phone"></u-text>
						<u-text customStyle="margin-top: 20rpx;" text="您的企业名称"></u-text>
						<u-input customStyle="margin-top: 20rpx;" v-model="addGroup.company" placeholder="请输入您的企业名称"
							clearable></u-input>
						<u-text customStyle="margin-top: 20rpx;" text="企业简介"></u-text>
						<u--textarea customStyle="margin-top: 20rpx;" height="260rpx" :maxlength="-1"
							:autoHeight="autoHeight" @linechange="linechange"
							placeholder="举例：专业回收各种工厂废钢铁、铜、 铝、不锈钢，铝合金等各种废金属" v-model="addGroup.info">
						</u--textarea>
					</view>
				</scroll-view>
				<view style="display: flex;flex-direction: row;justify-content: center;margin-top: 40rpx; ">
					<u-button customStyle="width: 200rpx;margin-bottom: 40rpx;" type="success" shape="circle"
						@click="addGroupUser">申请加入</u-button>

				</view>
			</view>

		</u-popup>

		<!-- 进入群聊弹框 -->
		<u-popup :safeAreaInsetBottom="true" :safeAreaInsetTop="true" closeable :show="showPopGroup" mode="center"
			@close="showPopGroup=false" :round="10">
			<view class="u-popup-slot">
				<u-image :src="joinGroup" width="320rpx" height="320rpx"
					custom-style="margin-left: 155rpx;margin-right: 155rpx"></u-image>
				<view style="display: flex;flex-direction: row;justify-content: center;margin-top: 97rpx;">
					<u-button customStyle="width: 400rpx;margin-bottom: 40rpx;" type="success"
						shape="circle">长按二维码进群聊天</u-button>

				</view>
			</view>

		</u-popup>

	</view>
</template>

<script>
	import {
		ownDetail
	} from '@/api/my.js';
	import {
		ownAddSecond,
		ownToChat,
		user_in_group

	} from '@/api/home.js';
	export default {
		data() {
			return {
				// 获取整个导航栏高度
				bgHeight: this.ToolClass.getNavtionBarAllHeight(),
				// 获取微信胶囊高度
				topHeigh: this.ToolClass.getWXJNHeight(),
				listTab: [{
					name: '已加入',
				}, {
					name: '审核中',
				}, {
					name: '审核驳回',
				}],
				sts: 2,
				current: 0,
				groupList: [],
				groupName: "",
				phone: uni.getStorageSync("phone"),
				showPopApply: false,
				addGroup: {
					name: "",
					company: "",
					info: "",
					group_id: "",
					app_id: "wx07c6c7321f12486f",
				},
				showPopGroup: false,
				joinGroup: "https://work.weixin.qq.com/gm/1a0452ab53adfeb4a4a58a4ec6b261f8",
				autoHeight: false
			}
		},
		// onPullDownRefresh() {
		// 	this.getGroup() 
		// },
		onLoad: function(option) {
			this.sts = option.sts || 2
			console.log(option)
			switch (option.sts) {
				case "2":
					this.current = 0
					break;
				case "1":
					this.current = 1
					break;
				case "3":
					this.current = 2
					break;
			}
			this.getGroup()
			this.phone = uni.getStorageSync("phone")
		},
		methods: {
			 qx(item){ //已进群
			 var _this=this
				user_in_group({
					group_id: item.group_id,
				}).then(res => {
						
				setTimeout(function () {
					_this.getGroup()
				}, 1000);
					
						// uni.stopPullDownRefresh()



				})

			},
			linechange(e) {
				this.autoHeight = e.detail.lineCount > 8
			},
			closePopApply() {
				this.showPopApply = false
			},
			finish() {
				uni.navigateBack()
			},
			// 去聊天方法回调,可以判断成功还是失败
			completemessage(e){},
			scrolltolower() {},
			clickTab(res) {
				this.groupList = []
				this.current = res.index
				switch (res.index) {
					case 0:
						this.sts = 2
						break;
					case 1:
						this.sts = 1
						break;
					case 2:
						this.sts = 3
						break;
				}
				this.getGroup()
			},
			async addGroupUser() {
				if (this.addGroup.name == "") {
					uni.showToast({
						title: '请输入您的称呼',
						icon: 'none'
					})
					return
				}
				ownAddSecond(this.addGroup).then(res => {
					console.log(res)
					this.showPopApply = false
					this.getGroup()
				}).catch(err => {
					this.showPopApply = false
					this.getGroup()
				})
			},
			clickItem(item) {
				// uni.login({
				// 	provider: 'weixin', //使用微信登录
				// 	success: function(loginRes) {
				// 		console.log(loginRes);
				// 	}
				// });
				// ownToChat({
				// 	group_id: item.group_id
				// }).then(res => {
				// 	this.joinGroup = res.qr_code
				// })
				// this.showPopGroup = true
				console.log(item)
				if (this.sts == 3) {
					this.addGroup = {
						...this.addGroup,
						...item
					}
					this.showPopApply = true
					this.addGroup.group_id = item.group_id
					this.groupName = item.group__name
				} else {

				}

			},
			async getGroup() {

				

				ownDetail({
					sts: this.sts,
					app_id: "wx07c6c7321f12486f"
				}).then(res => {
					this.groupList = []
					this.groupList = res.data
					uni.stopPullDownRefresh()
					console.log(this.groupList)
				})
			}
		}
	}
</script>

<style>
	.u-popup-slot {
		width: 700rpx;
	}
	.chatview {
		position: relative;
		width: 48%;
		border-radius: 35rpx;
		text-align: center;
		line-height: 70rpx;
		color: #fff;
		border: 1rpx solid #5ac725;
		font-weight: 500;
		background: #5ac725;
		box-sizing: border-box;
	}
	.cellview {
		position: absolute;
		left: 0;
		top: 0;
		width: 95%;
		height: 95%;
		opacity: 0;
	}
</style>